<template>
  <div style="display: flex">
    <!--    <div style="width: 448px;background: red;height: 780px">-->
    <!--      <img style="width: 100%;height: 100%" src="../assets/gpt/4.png">-->
    <!--    </div>-->
    <div style="width: 100%;padding: 10px">
      <div style="display: flex;justify-content: space-between;width: 100%;">
        <img style="height: 40px" @click="returnA" src="../assets/gpt/7.png"/>
        <img style="height: 40px" src="../assets/gpt/6.png"/>
      </div>
      <div class="content">
        <div>
          <div style="display: flex;justify-content: end;margin-bottom: 20px;">
            <div v-if="value1" class="duanluo" v-html="value1"></div>
          </div>
          <div style="text-align: left;white-space: pre-line;line-height: 26px;font-size: 16px" v-html="txt"></div>
          <div v-if="txt" style="display: flex;justify-content: flex-start">
            <img src="../assets/gpt/5.png"/>
          </div>
        </div>
        <div class="info">
          <div class="inpt">
            <el-input placeholder="询问任何问题" @keydown="keydownEvent" style="height: 40px" class="int"
                      v-model="value"/>
            <img style="width: 600px" src="../assets/gpt/3.png">
          </div>
          <div style="margin-top: 10%">ChatGPT 也可能会犯错。请核查重要信息。</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import {ref} from "vue";

let emit = defineEmits(['returnEvent'])
let value = ref('')
let value1 = ref('')
let txt = ref('')
let txt1 = ref('')

let titleObj = {
  "世界上飞得最高的鸟是哪种？": '世界上飞得最高的鸟是秃鹫(Griffonvulture)。它们曾在一项研究中被发现飞行高度达到37,000英尺(约11,278米)，几乎接近商业飞机的飞行高度。秃有非常强的滑翔能力，能够利用气流在高空翱翔。',
  "南极洲的冰层最厚可以达到多少米？": "南极洲的冰层最厚的地方可以达到<span style='font-weight: bold'>约4800米</span>。这个冰层覆盖了大约98%的南极洲，平均厚度大约是2000米。南极冰盖是地球上最大、最厚的冰体，包含了全球约70%的淡水。如果这些冰层融化，海平面将会上升大约60米。\n" +
      "<div style='margin-top: 10px'>南极冰盖的厚度因地区而异，在一些山脉和高原上，冰层特别厚，而在一些沿海地区冰层较薄。</div>",
  "世界上最长寿的树有多少岁？": "世界上最长寿的树是<span style='font-weight: bold'>诺布尔松</span>(Pinus longaeva),它的年龄大约在<span style='font-weight: bold'>4800岁</span>左右。这些树生长在美国加利福尼亚州的白山地区，它们是地球上已知的最古老活树。最长寿的个体甚至可以追溯到公元前约2830年。\n" +
      "<div style='margin-top: 10px'>除此之外，世界上最大的树（按体积计算）是<span style='font-weight: bold'>红杉树</span>(Sequoia sempervirens)，它们虽然没有诺布尔松那么古老，但也能活几干年。</div>",
  "一只普通的蚂蚁可以举起多重的物体？": "一只普通蚂蚁的举重能力相当惊人，通常可以举起<span style='font-weight: bold'>自身体重的10到50倍</span>的物体。具体数字取决于蚂蚁的种类和体型。例如，较小的蚂蚁可能能举起自身体重的10倍左右而较大的蚂蚁(如赤裸蚁)可能能举起更重的物体。\n" +
      "<div style='margin-top: 10px'>蚂蚁之所以能够举起如此重的物体，是因为它们的身体结构非常适合承受较大的压力。蚂蚁的肌肉和骨骼结构非常强壮，且其小巧的体型意味着它们的肌肉在相对较小的体积内可以产生较大的力量。</div>" +
      "<div style='margin-top: 10px'>这种强大的举重能力使得蚂蚁在寻找食物、建巢或搬运物品时显得非常高效和有组织。</div>",
  "鲸鱼一口可以喝多少升水？": "鲸鱼并不像我们想象的那样“喝水”。事实上，鲸鱼通过吃食物(如小鱼和磷虾)获得水分，而不是通过直接饮水。鲸鱼的体内会自然产生水分，主要来自它们吃的食物中的水分。\n" +
      "<div style='margin-top: 10px'>鲸鱼的饮食中含有大量的水分，尤其是它们捕食的小型海洋生物。在鲸鱼消化食物的过程中，会通过新陈代谢将这些食物中的水分提取出来，帮助它们保持水分平衡。</div>" +
      "<div style='margin-top: 10px'>不过，有些鲸鱼，如蓝鲸等巨型鲸种，吞食一口水时可以吸入大量的水，因为它们在捕食时会同时吞下大量的海水和食物。以蓝鲸为例，它每次吞食时，可以一次性吞下<span style='font-weight: bold'>上千升水</span>，但它并不是在“喝”水，而是通过过滤器(如须鲸的须板)将食物和水分离，只有食物被摄入，水则被排出。</div>",
  "人类的皮肤每年会脱落多少公斤？": "人类的皮肤是一个不断更新的器官，皮肤的表皮层(最外层)大约每<span style='font-weight: bold'>28至30天</span>会经历一次完整的更新过程。这意味着每个皮肤细胞在一个月内会脱落并被新生的细胞替代。" +
      "<div style='margin-top: 10px'>如果按年计算的话，皮肤每年大约会脱落<span style='font-weight: bold'>大约9到10公斤</span>的皮肤细胞！这些脱落的皮肤细胞主要是角质层的细胞，通常以细微的碎屑形式脱落，我们通常在清洁环境中会看到一些皮肤屑。</div>" +
      "<div style='margin-top: 10px'>这个过程是皮肤自我修复的一部分，随着时间的推移，新的皮肤细胞会从皮肤深层向上推移，最终形成新的表皮层，保证皮肤健康和屏障功能。</div>",
  "云是如何形成的？": "云是由空气中的水蒸气凝结成小水滴或冰晶形成的。当温暖的湿气上升到空中时它遇到较冷的空气，水蒸气就会冷却并凝结成微小的水滴或冰晶，这些水滴或冰晶聚集在一起形成云。云的形成过程可以分为几个步骤:\n" +
      "<div style='margin-top: 5px; text-indent: 10px;display: flex'><p style='font-weight: bold'>1.水蒸气上升：</p><p style='flex: 1'>当地面温暖的空气吸收水分(如通过蒸发、蒸腾等过程)，形成湿气。空气中的水蒸气随着热空气上升。</p></div>" +
      "<div style='margin-top: 5px;text-indent: 10px;display: flex'><p style='font-weight: bold'>2.冷却和凝结：</p><p style='flex: 1'>上升的空气在较高的地方会遇到较低的温度。当空气冷却至露点温度(空气无法再容纳更多水蒸气时)，水蒸气就会凝结成小水滴或冰晶。</p></div>" +
      "<div style='margin-top: 5px;text-indent: 10px;display: flex'><p style='font-weight: bold'>3.水滴或冰晶聚集：</p><p style='flex: 1'>这些微小的水滴或冰晶汇聚在一起，形成云团。云中的水滴非常小，每个水滴的直径通常只有几十微米，集合起来才能看到明显的云</p></div>" +
      "<div style='margin-top: 5px;text-indent: 10px;display: flex'><p style='font-weight: bold'>4.云的类型：</p><p style='flex: 1'>根据云中水滴或冰晶的状态、数量和高度的不同，云可以分为不同如积云、层云、卷云等。</p></div>" +
      "<div style='margin-top: 5px;text-indent: 10px;display: flex'><p style='font-weight: bold'>5.降水：</p><p style='flex: 1'>当云中的水滴或冰晶变得足够大时，它们可能会掉落下来，形成降水如雨、雪、雹子等。</p></div>" +
      "<div style='margin-top: 10px'>云的形成和种类受气象条件的影响，比如温度、湿度、气压和气流等。</div>",
  "地震是如何发生的？": "地震是因为<span style='font-weight: bold'>地下岩石发生突然断裂或移动</span>，释放出很大的能量，导致地面震动。地球的表面就像一个大拼图，由许多块叫做<span style='font-weight: bold'>板块</span>的大岩石组成。这些板块一直在缓慢地\n" +
      "移动，但有时候它们会被卡住，不能顺利移动。压力一点点积累，直到某一天，压力太大，岩石断裂或板块突然滑动，这时就会产生地震。地震发生的地方叫<span style='font-weight: bold'>震源</span>，离震源最近的地面位置叫<span style='font-weight: bold'>震中</span>，这里的震动最强烈。地震可以引起房屋倒塌、地面裂开，甚至引发<span style='font-weight: bold'>海啸</span>。虽然地震无法完全预防，但科学家可以研究它们，帮助人们更好地防灾！",
  "为什么天空是蓝色的？": "天空看起来是蓝色的，主要是由于<span style='font-weight: bold'>瑞利散射</span>(Rayleigh scattering)的现象。当太阳光照射到地球大气层时，空气中的分子和微小颗粒会散射光线。太阳光是由多种不同颜色的光组成的，其中蓝色光的波长比红色光短。波长短的光(如蓝光)比波长长的光(如红光)更容易被大气中的分子散射。\n" +
      "由于蓝光散射得最为强烈，所以我们看到天空大部分时间是蓝色的。当太阳在低空时，比如在日出和日落时，光线通过大气的路径更长，蓝光被散射得几乎没有剩下，而波长较长的红光和橙光则散射得更多，因此天空会呈现红色或橙色。\n" +
      "简单来说，蓝色光的波长最短，散射最强，所以我们常常看到蓝色的天空。",
  "为什么树叶在秋天会变色？": "树叶在秋天会变色，是因为<span style='font-weight: bold'>叶子里的叶绿素减少了</span>，其他颜色的色素显现出来啦！" +
      "树叶之所以是绿色的，是因为里面有<span style='font-weight: bold'>叶绿素</span>，它能帮助植物吸收阳光，进行<span style='font-weight: bold'>光合作用</span>制造养分。但到了秋天，天气变冷，白天变短，树木为了节省能量，就会减少叶绿素的制造。随着叶绿素消失，叶子里原本就存在的<span style='font-weight: bold'>黄色（胡萝卜素）和橙色（叶黄素）就会显现出来，而一些树木，比如枫树，还会产生红色（花青素）</span>，让叶子变得五彩斑斓！\n" +
      "最后，树叶变干、变脆，风一吹就会飘落下来。这也是树木为冬天做准备的一种方式",
  "为什么铝比铁更不容易生锈？": "铝比铁更不容易生锈的原因在于它的<span style='font-weight: bold'>表面形成了保护性氧化层</span>。\n" +
      "<div style='margin-top: 5px; text-indent: 10px;display: flex'><p style='font-weight: bold'>1.铝的氧化层：</p><p style='flex: 1;text-indent: 1px;'>当铝暴露在空气中时，它会迅速与空气中的氧气反应，形成一层极薄的氧化铝(AIO;)保护层。这层氧化铝非常坚硬且不易脱落，能够有效地隔绝空气和水分，防止进一步的腐蚀。这使得铝在大多数环境条件下不会像铁那样生锈。</p></div>" +
      "<div style='margin-top: 5px; text-indent: 10px;display: flex'><p style='font-weight: bold'>2.铁的腐蚀过程：</p><p style='flex: 1;text-indent: 1px;'>铁在潮湿或含氧环境中更容易发生氧化反应，形成氧化铁，也就是我们常说的“生锈”。与铝不同，氧化铁的层不够致密且容易剥落，这样就暴露出新的铁表面，继续发生氧化，导致铁生锈的过程不断加剧。</p></div>" +
      "<div style='margin-top: 10px'>因此，铝的氧化层是其防止生锈的关键，而铁的氧化物则无法有效地防止进一步腐蚀，导致铁容易生锈。</div>",
  "植物是如何感知光线方向的？": "植物感知光线方向的能力主要依赖于一种叫做<span style='font-weight: bold'>向光性</span>(phototropism)的生理现象，这是植物通过光敏感受器来感知光线的方向并做出反应的机制。以下是植物如何感知和响应光线方向的过程:\n" +
      "<div style='margin-top: 5px; text-indent: 10px;display: flex'><p style='font-weight: bold'>1.光敏色素：</p><p style='flex: 1;text-indent: 1px;'>植物细胞中的一种重要光敏色素叫做蓝光受体，主要包括光敏素(phytochrome)和Cryptochrome。这些光敏色素能够感知到光的强度和方向，尤其是蓝光。蓝光是植物主要感知的光源，它能够触发一系列细胞反应，帮助植物判断光的来源。</p></div>" +
      "<div style='margin-top: 5px; text-indent: 10px;display: flex'><p style='font-weight: bold'>2.细胞伸长反应：</p><p style='flex: 1;text-indent: 1px;'>当植物感知到来自某个方向的光时，通常会发生一种细胞生长的不均匀现象。植物的生长素(auxin)是一种促进细胞伸长的植物激素。在光线的侧，生长素会聚集，并促进那一侧细胞的伸长。与此同时，阴暗的一侧生长素浓度较低，导致那部分细胞的生长速度较慢。</p></div>" +
      "<div style='margin-top: 5px; text-indent: 10px;display: flex'><p style='font-weight: bold'>3.向光性：</p><p style='flex: 1;text-indent: 1px;'>通过这一机制，植物能够使朝向光源的部分细胞生长得更快，从而使植物整体向光源弯曲生长。这种现象被称为“向光性“或“正向光性”，它帮助植物更好地利用阳光进行光合作用。</p></div>" +
      "<div style='margin-top: 5px; text-indent: 10px;display: flex'><p style='font-weight: bold'>4.其他响应：</p><p style='flex: 1;text-indent: 1px;'>除了蓝光，植物还能够通过不同的感光机制响应其他类型的光，如红光、远红光等，这些光线影响植物的形态发育、开花、种子发芽等过程。</p></div>" +
      "<div style='margin-top: 10px'>总之，植物通过复杂的激素调节和光敏色素感知机制，能够感知光线的方向，并通过改变细胞生长来使自身向光源倾斜，以提高光合作用的效率。</div>"
}
const keydownEvent = (event) => {
  if (event.keyCode == 13) {
    console.log(value1.value, "value1.value")
    value1.value = value.value
    if (titleObj[value1.value]) {
      txt1.value = titleObj[value1.value]
      zidong()
    } else {
      txt.value = ''
    }
  }
}
const returnA = () => {
  emit('returnEvent')
}


const openInit = (data) => {
  value.value = data
  console.log(value.value, "===value")
  if (titleObj[data]) {
    txt1.value = titleObj[data]
    console.log(txt1.value, "===txt1.value")

    // txt.value = '世界上飞得最高的鸟是秃鹫(Griffonvulture)。它们曾在一项研究中被发现飞行高度达到37,000英尺(约11,278米)，几乎接近商业飞机的飞行高度。秃有非常强的滑翔能力，能够利用气流在高空翱翔。'
    zidong()
  }
  value1.value = data
}
let interValt = ref(null)
const zidong = () => {
  let txtArr = txt1.value.split("")
  txt.value = ''
  let count = 0
  clearInterval(interValt)
  interValt = setInterval(() => {
    txt.value += txtArr[count]
    count++
    if (count == txtArr.length) {
      clearInterval(interValt)
    }
  }, 10)
}
defineExpose({
  openInit
})
</script>
<style scoped lang="scss">
.content {
  text-align: center;
  width: 640px;
  margin: 0 auto;
  //margin-top: 145px;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 78%;
}

.inpt {
  box-shadow: 0px 0px 0px 1px #d3d3d3;
  border-radius: 10px;
  height: 90px;
  padding-top: 4px;
  //margin-top: 180px;
}

.int {
  height: 40px;

}

.info {
  //position: fixed;
  //bottom: 60px;
  //left: 43%;
  right: 50%;
  margin-top: 3%;
  font-size: 12px;
  //transform: translateX(-50%);
}

:deep(.el-input__wrapper) {
  border: 0;
  box-shadow: none;
}

.duanluo {
  //width: 240px;
  background: #edeaea;
  height: 40px;
  padding: 0 10px;
  line-height: 40px;
  border-radius: 20px;
}
</style>

<style>
body {
  margin: 0;
}

p {
  margin: 0
}
</style>